<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="container">
				<view class="header" :style="{paddingTop:statusH+'px'}">
					<view class="header_item" @click="$utils.navigateTo('index/city')">
						<image src="/static/index_top_l.png" mode=""></image>
						<text>{{city}}</text>
					</view>
					<view class="header_item" @click="$utils.navigateTo('cart/index')">
						<image src="/static/index_top_r.png" mode=""></image>
						<text>租物车</text>
					</view>
				</view>
				<view class="search">
					<view class="search_left" @click="$utils.navigateTo('index/Nationalstores')">
						<text>全国店铺</text>
						<image src="/static/search_icon.png" mode=""></image>
					</view>
					<input type="text" placeholder="搜索需要的商品" placeholder-class="input_class"
						@click="$utils.navigateTo('search/index')" />
				</view>
				<view class="swiper-box">
					<swiper :circular="true" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.duration"
						interval="5000" :duration="swiper.duration" indicator-active-color="#b71c1c">
						<swiper-item class="have-none" v-for="(image, index) in images" :key="index"
							@click="sliderJump(image.url)">
							<image :src="image.photo" mode="widthFix"></image>
						</swiper-item>
					</swiper>
				</view>
				<!-- <view class="top_middle">
				<image src="/static/index_middle_icon1.png" mode=""></image>
				<image src="/static/index_middle_icon2.png" mode=""></image>
			</view> -->
				<view class="swipers">
					<hr-grid-swiper indicatorBackground="#D8D8D8" indicatorDotActiveColor="#55B6EA"
						:grid-data="category" :columns="5" :rows="2">
						<template #default="{ item}">
							<view class="entry-item" @click="$utils.navigateTo('category/index',{ id: item.id })">
								<!-- <image :src="`/static/swiper_icon_${item.id}.png`" mode=""></image> -->
								<image :src="item.image" mode=""></image>
								<view class="slot-text">{{ item.name }}</view>
							</view>
						</template>
					</hr-grid-swiper>
				</view>
				<view class="gg_text">
					<view class="gg_left">
						<image :src="img_1[0]['image']" mode=""></image>
					</view>
					<view class="gg_right">
						<image :src="img_1[1]['image']" mode="" @click="$utils.navigateTo(img_1[1]['url'])"></image>
						<image :src="img_1[2]['image']" mode="" @click="$utils.navigateTo(img_1[2]['url'])"></image>
					</view>
				</view>
				<view class="hot_box">
					<image class="back_img" :src="index_hot_back_img" mode=""></image>
					<view class="box_con">
						<view class="title">本城热租宝贝</view>
						<view class="hot_list">
							<view class="hot_item" v-for="(item, index) in hot"
								@click="$utils.navigateTo('goods/view',{ id: item.id })">
								<image :src="item.image" mode=""></image>
								<view class="name">{{item.name}}</view>
								<view class="money">{{item.price}}元/天</view>
							</view>
						</view>
					</view>
				</view>
				<view class="middle_nav">
					<view class="nav_item item_1">
						<!-- <view class="head_text">49/天</view> -->
						<image class="head_img" :src="index_nav_head" mode=""></image>
						<view class="nav_title title_1">{{img_2[0]['name']}}</view>
						<!-- <view class="nav_sm_text">尼康Zf机身...</view> -->
						<image class="image_1" :src="img_2[0]['image']" mode=""></image>
					</view>
					<view class="nav_item item_2">
						<view class="nav_title title_2">{{img_2[1]['name']}}</view>
						<!-- <view class="nav_sm_text">299/天</view> -->
						<image class="image_2" :src="img_2[1]['image']" mode=""></image>
					</view>
					<view class="nav_item item_3" @click="$utils.navigateTo(img_2[2]['url'])">
						<view class="nav_title title_3">{{img_2[2]['name']}}</view>
						<!-- <view class="nav_sm_text">官方福利</view> -->
						<image class="image_3" :src="img_2[2]['image']" mode=""></image>
					</view>
					<view class="nav_item item_4" @click="$utils.navigateTo(img_2[3]['url'])">
						<view class="nav_title title_4">{{img_2[3]['name']}}</view>
						<!-- <view class="nav_sm_text">精彩秒杀</view> -->
						<image class="image_4" :src="img_2[3]['image']" mode=""></image>
					</view>
				</view>
				<view class="boxs boxs_1">
					<view class="boxs_title">
						<image src="/static/index_title_icon.png" mode=""></image>
						<view class="title_box"> 租选<text style="color: #FF5B5B;">好</text>物 </view>
						<text class="title_box2">实惠全品类 租出好生活</text>
					</view>
					<view class="box_hw">
						<image v-for="(item, index) in img_3" :src="item.image" @click="$utils.navigateTo(item.url)"
							mode=""></image>
						<!-- <image src="/static/index_hw_1.png" mode=""></image>
					<image src="/static/index_hw_2.png" mode=""></image>
					<image src="/static/index_hw_3.png" mode=""></image> -->
					</view>
				</view>
				<view class="boxs boxs_2">
					<view class="boxs_title">
						<image src="/static/index_title_icon.png" mode=""></image>
						<view class="title_box">品牌馆</view>
						<text class="title_box2">正品保障</text>
					</view>
					<view class="logo_list">
						<view class="list_item" v-for="(item, index) in brand_list">
							<image style="width: 131rpx;height: 83rpx;" :src="item.image" ode=""></image>
						</view>
						<!-- <view class="list_item">
						<image style="width: 131rpx;height: 83rpx;" src="/static/index_logo_1.png" mode=""></image>
					</view>
					<view class="list_item">
						<image style="width: 117rpx;height: 29rpx;" src="/static/index_logo_2.png" mode=""></image>
					</view>
					<view class="list_item">
						<image style="width: 81rpx;height: 81rpx;" src="/static/index_logo_3.png" mode=""></image>
					</view>
					<view class="list_item">
						<image style="width: 131rpx;height: 59rpx;" src="/static/index_logo_4.png" mode=""></image>
					</view>
					<view class="list_item">
						<image style="width: 144rpx;height: 61rpx;" src="/static/index_logo_5.png" mode=""></image>
					</view>
					<view class="list_item">
						<image style="width: 118rpx;height: 97rpx;" src="/static/index_logo_6.png" mode=""></image>
					</view>
					<view class="list_item">
						<image style="width: 135rpx;height: 77rpx;" src="/static/index_logo_7.png" mode=""></image>
					</view>
					<view class="list_item">
						<image style="width: 133rpx;height: 85rpx;" src="/static/index_logo_8.png" mode=""></image>
					</view> -->
					</view>
				</view>
				<view class="boxs_3">
					<view class="boxs3_title">
						<view class="boxs3_left">
							<view @click="navClick1(index,item.id)" v-for="(item,index) in home_cate_list" :key="index"
								class="left_item" :class="navIndex1 == index ? 'left_act' : ''">{{item.title}}</view>
						</view>
						<view class="boxs3_right" @click="goCategoty()">更多</view>
					</view>
					<view class="boxs3_box">
						<view class="boxs3_item" v-for="(item, index) in home_cate_pro_list"
							@click="$utils.navigateTo('goods/view',{ id: item.id })">
							<image class="img_l_t" :src="index_l_t" mode=""></image>
							<view class="box_l_t">{{item.price}}元/天</view>
							<view class="boxs3_cons">
								<image :src="item.photo" mode=""></image>
								<view class="title_name">{{item.title}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="boxs_4">
					<view class="boxs4_title">
						每日精选
						<image style="width: 63rpx;height: 59rpx;left: 57rpx;top: 8rpx;" :src="index_jx_1"
							mode=""></image>
						<image style="width: 30rpx;height: 28rpx;left: 220rpx;top: 56rpx;" :src="index_jx_2"
							mode=""></image>
						<image style="width: 147rpx;height: 78rpx;top: 21rpx;right: 37rpx;" :src="index_jx_3"
							mode=""></image>
					</view>
					<view class="boxs_3" style="border-radius: 24rpx;margin-top: -20rpx;">
						<view class="boxs3_box">
							<view class="boxs3_item" v-for="(item, index) in recommend"
								@click="$utils.navigateTo('goods/view',{ id: item.id })">
								<image class="img_l_t" :src="index_l_t" mode=""></image>
								<view class="box_l_t">{{item.price}}元/天</view>
								<view class="boxs3_cons">
									<image :src="item.image" mode=""></image>
									<view class="title_name">{{item.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="boxs5">
					<view class="boxs_title">
						<image src="/static/index_title_icon.png" mode=""></image>
						<view class="title_box">口碑推荐</view>
					</view>
					<view class="boxs5_nav">
						<view @click="navClick2(0)" class="nav5_item" :class="navIndex2 == 0 ? 'nav5_act' : ''">猜你喜欢
						</view>
						<view @click="navClick2(index+1,item.id)" v-for="(item,index) in navList2" :key="index"
							class="nav5_item" :class="navIndex2 == index+1 ? 'nav5_act' : ''">{{item.title}}</view>
					</view>
					<view class="boxs5_list">
						<view class="boxs5_item" v-for="(item, index) in navPro2"
							@click="$utils.navigateTo('goods/view',{ id: item.id })">
							<image :src="item.photo" mode=""></image>
							<view class="boxs5_name">{{item.title}}</view>
							<view class="boxs5_money">{{item.price}}元/天</view>
						</view>
					</view>
				</view>
			</view>
			<TabBar :tabBarShow="1"></TabBar>
		</mescroll-body>

		<loading v-if="isLoading"></loading>
		<empty-box type="service" v-if="isError && isLoading == false" @onEvents="onJump"></empty-box>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import loading from '../../components/tool/loading'
	import TabBar from '@/components/TabBar/TabBar.vue';
	import config from "@/config";
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
			MescrollUni,
			loading,
			TabBar
		},
		data() {
			return {
				swiper: {
					indicatorDots: true,
					autoplay: true,
					duration: 500,
				},
				isLoading: true,
				isError: false,
				images: [],
				//city: "上海",
				brand_list: [
					// {id: 1,label: "电脑"},
					// {id: 2,label: "镜头"},
					// {id: 3,label: "摄像机"},
					// {id: 4,label: "单反"},
					// {id: 5,label: "灯光"},
					// {id: 6,label: "录音"},
					// {id: 7,label: "无人机"},
					// {id: 8,label: "稳定器"},
					// {id: 9,label: "三脚架"},
					// {id: 10,label: "人工服务"},
					// {id: 10,label: "后续"}
				],
				img_1_0: '',
				img_1_1: '',
				img_1_2: '',
				img2_0: '',
				img2_1: '',
				img2_2: '',
				img2_3: '',
				img_3: [{
					'image': '',
					'url': ''
				}, {
					'image': '',
					'url': ''
				}, {
					'image': '',
					'url': ''
				}],
				//hotBrand: [],
				recommend: [],
				hot: [],
				navList1: ['灯光', '直播摄像机', '直播镜头', 'V-log'],
				navIndex1: 0,
				//city: {},
				city: "",
				navList2: [],
				navIndex2: 0,
				navPro2: [],
				page: {
					num: 1
				},
				cate_list_id: '',
				img_1: [{
					'image': '',
					'url': ''
				}, {
					'image': '',
					'url': ''
				}, {
					'image': '',
					'url': ''
				}],
				img_2: [{
					'image': '',
					'url': '',
					'name': ''
				}, {
					'image': '',
					'url': '',
					'name': ''
				}, {
					'image': '',
					'url': '',
					'name': ''
				}, {
					'image': '',
					'url': '',
					'name': ''
				}],
				home_cate_pro_list: [],
				home_cate_list: [],
				category: [],
				navIndex1Id:0,
				index_hot_back_img:config.uni_app_web_url + 'static/h5/index_hot_back.png',
				index_l_t:config.uni_app_web_url + 'static/h5/index_l_t.png',
				index_nav_head:config.uni_app_web_url + 'static/h5/index_nav_head.png',
				index_jx_1:config.uni_app_web_url + 'static/h5/index_jx_1.png',
				index_jx_2:config.uni_app_web_url + 'static/h5/index_jx_2.png',
				index_jx_3:config.uni_app_web_url + 'static/h5/index_jx_3.png',
				//navH:this.$storage.get("navH"),
				statusH:this.$storage.get("statusH")
			}
		},
		onNavigationBarSearchInputClicked: async function(e) {
			uni.navigateTo({
				url: `/pages/search/index`
			})
		},

		onShow() {
			//console.log('2222222222222222222',this.$storage.getJson("city"));
			if(this.$storage.getJson("city")){
				this.city = this.$storage.getJson("city")
			}
			this.hotCateList();
			this.homeList();
			this.navIndex1 = 0;
//const app = getApp();
//console.log('111111111',app.globalData.someData);
		},
		onLoad() {

	let that = this
		uni.getLocation({
			type: 'wgs84', // 坐标系类型，默认为wgs84
			geocode: true, // 设置为true以获取城市信息
			success: function(res1) {
				
				    const { latitude, longitude } = res1;
				const key = '21b1a147643e9652022d734e802df404'; // 替换为你的高德地图 API 密钥
				const location = `${longitude},${latitude}`; // 经纬度拼接
				
				uni.request({
				    url: `https://restapi.amap.com/v3/geocode/regeo?location=${location}&key=${key}`,
				    success: (res) => {
				        if (res.data.status === '1') {
				            const city = res.data.regeocode.addressComponent.city || res.data.regeocode.addressComponent.province;
				            const citycode = res.data.regeocode.addressComponent.adcode; ;
				            console.log('当前城市：', city);
							that.$storage.setJson("city", city)
							that.$storage.setJson("citycode", citycode)
							that.city=city
				        } else {
				            console.error('逆地理编码失败：', res.data.info);
				        }
				    },
				    fail: (err) => {
				        console.error('请求失败：', err);
				    }
				});
				
				
				
				
				// console.log('当前位置的经度：' + res.longitude);
				// console.log('当前位置的纬度：' + res.latitude);
				// console.log(res);
				// this.city.city = res.address.city
				// this.city.latitude = res.address.latitude
				// this.city.longitude = res.address.longitude
				// this.$storage.setJson("city", res.address);
			},
			fail: function(err) {
				uni.showToast({
					title: '获取地址失败，将导致部分功能不可用',
					icon: 'none'
				});
				console.log(err,'weeeeeeeeeeeeeeeeee')
				
			}
		});
	





		},
		methods: {
			catJump(data) {
				// console.log(data);
				if (data.url == 'category/index') {
					this.$utils.switchTab(data.url);
				} else {
					this.$utils.navigateTo(data.url);
				}
				 
			},
			goCategoty() {
				console.log(this.navIndex1Id)
				uni.navigateTo({
					url: '/pages/category/index?id='+this.navIndex1Id
				})
			},
			sliderJump(url) {
				uni.navigateTo({
					url: url
				})
			},
			onJump() {
				this.loadData();
				// this.hotCateList();
				this.mescroll.resetUpScroll();
			},
			loadData() {
				this.$http.getHomeData().then(res => {
					if (res.status) {
						this.result = [];
						this.images = res.data.banner;
						this.category = res.data.nav;
						this.brand_list = res.data.brand_list;
						this.img_1 = res.data.img_1;
						this.img_1_0 = res.data.img_1[0].image;
						this.img_1_1 = res.data.img_1[1].image;
						this.img_1_2 = res.data.img_1[2].image;
						this.img_2 = res.data.img_2;
						this.img2_0 = res.data.img_2[0].image;
						this.img2_1 = res.data.img_2[1].image;
						this.img2_2 = res.data.img_2[2].image;
						this.img2_3 = res.data.img_2[3].image;
						this.img_3 = res.data.img_3;
						this.hot = res.data.hot;
						this.recommend = res.data.recommend;
						this.notice = res.data.notice;
						this.isLoading = false;
						this.isError = false;
					} else {
						this.isLoading = false;
						this.isError = true;
					}
				}).catch(err => {
					this.isLoading = false;
					this.isError = true;
				});
			},
			hotCateList(cid = 0) {
				this.$http.getHomeHotCateList({
					cid: cid
				}).then(res => {
					if (res.status) {
						//console.log(res.data.list);
						this.result = [];
						//this.hotBrand = res.data.list;
						this.home_cate_list = res.data.cate_list;
						this.home_cate_pro_list = res.data.list;
						this.navIndex1Id = res.data.cid;
						this.isLoading = false;
						this.isError = false;
					} else {
						this.isLoading = false;
						this.isError = true;
					}
				}).catch(err => {
					this.isLoading = false;
					this.isError = true;
				});
			},
			homeList(cate_list_id) {
				this.$http.getHomeList({
					page: this.page.num,
					cid: cate_list_id
				}).then(res => {
					if (res.status) {
						this.result = [];
						this.navList2 = res.data.cate_list;
						this.navPro2 = res.data.list;
						this.isLoading = false;
						this.isError = false;
					} else {
						this.isLoading = false;
						this.isError = true;
					}
				}).catch(err => {
					this.isLoading = false;
					this.isError = true;
				});
			},
			downCallback() {
				setTimeout(() => {
					this.loadData();
					this.mescroll.resetUpScroll();
				}, 200);
			},
			upCallback(page) {
				this.isLoading = false;
				this.$http.getHomeList({
					page: page.num,
				}).then((result) => {
					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if (result.status == 1) {
						// this.navList2 = res.data.cate_list;
						if (page.num == 1) this.list = [];
						this.list = this.list.concat(result.data.list);
					} else if (result.status == -1) {
						this.mescroll.endErr();
					}
				}).catch(error => {
					this.mescroll.endErr();
				});
			},
			navClick1(_index, id) {
				this.navIndex1 = _index;
				this.navIndex1Id = id;
				console.log(this.navIndex1Id );
				this.hotCateList(id);
			},
			navClick2(_index, cate_list_id) {
				this.navIndex2 = _index;
				this.homeList(cate_list_id)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		padding: 32rpx;
		width: calc(100% - 64rpx);
		background: linear-gradient(181deg, #BBE0FC 0%, #78C0F9 8%, #ACDCF4 15%, rgba(209, 240, 241, 0.9846) 19%, rgba(209, 240, 241, 0) 100%);
		
		/* #ifndef MP */
		.header {
			justify-content: space-between;
		}
		/* #endif */
		
		/* #ifdef MP */
		.header {
			.header_item {
				margin-right: 30rpx;
			}
		}	
		/* #endif */
		
		.header {
			display: flex;
			align-items: center;

			.header_item {
				display: flex;
				align-items: center;
				
				image:nth-child(1) {
					width: 40rpx;
					height: 40rpx;
				}

				image:nth-child(2) {
					width: 42rpx;
					height: 42rpx;
				}

				text {
					padding-left: 15rpx;
					font-weight: 400;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 50rpx;
				}
			}
		}

		.search {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			height: 70rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 123rpx 123rpx 123rpx 123rpx;
			border: 2rpx solid #FFFFFF;

			.search_left {
				width: 227rpx;
				height: 70rpx;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 123rpx 0rpx 0rpx 123rpx;
				text-align: center;
				line-height: 70rpx;

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
					line-height: 34rpx;
					padding-right: 18rpx;
				}

				image {
					width: 20rpx;
					height: 16rpx;
				}
			}

			input {
				flex: 1;
				border: none;
				outline: none;
				text-indent: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				padding-right: 20rpx;
			}

			.input_class {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.swiper-box {
			margin-top: 20rpx;

			image {
				width: 100%;
			}

			.uni-swiper-dots {
				bottom: 50rpx;
			}
		}

		.top_middle {
			margin-top: 22rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image:nth-child(1) {
				width: 243rpx;
				height: 220rpx;
				margin-left: 17rpx;
			}

			image:nth-child(2) {
				width: 298rpx;
				height: 232rpx;
				margin-right: 17rpx;
			}
		}

		.swipers {
			height: 290rpx;
			margin-top: 15rpx;

			.entry-item {
				width: 121rpx;
				height: 121rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				text-align: center;

				image {
					margin-top: 10rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.slot-text {
					text-align: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #646464;
				}
			}
		}

		.gg_text {
			margin-top: 30rpx;
			height: 314rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.gg_left {
				width: 48%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.gg_right {
				width: 48%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				image {
					width: 333rpx;
					height: 147rpx;
				}
			}
		}

		.hot_box {
			margin-top: 30rpx;
			position: relative;
			height: 452rpx;
			width: 100%;

			.back_img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}

			.box_con {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;

				.title {
					padding-top: 36rpx;
					text-align: center;
					font-weight: 500;
					font-size: 36rpx;
					color: #3D3D3D;
				}

				.hot_list {
					display: flex;
					align-items: center;
					margin-top: 100rpx;
					width: 85%;
					margin: 80rpx auto;
					overflow: auto;
					flex-wrap: nowrap;

					.hot_item {
						width: 550rpx;
						text-align: center;
						margin-right: 29rpx;

						image {
							width: 148rpx;
							height: 118rpx;
						}

						.name {
							margin-top: 0rpx;
							width: 150rpx;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
							overflow: hidden;
							text-overflow: ellipsis;
							text-wrap: wrap;
							white-space: normal;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.money {
							text-align: left;
							margin-top: 10rpx;
							font-weight: 600;
							font-size: 28rpx;
							color: #D30000;
						}
					}
				}
			}
		}

		.middle_nav {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item_1 {
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				background: linear-gradient(138deg, #FBF9F3 0%, #FAF3E9 52%, #F0F8FD 100%);
			}

			.item_2 {
				background: linear-gradient(180deg, #B1D0FF 0%, #FCFDFF 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
			}

			.item_3 {
				background: linear-gradient(180deg, #D6DCFF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
			}

			.item_4 {
				background: linear-gradient(180deg, #FFD19D 0%, #FFFFFF 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
			}

			.nav_item {
				position: relative;
				width: 157rpx;
				height: 220rpx;
				border-radius: 24rpx;
				text-align: center;

				.head_img {
					position: absolute;
					top: -10rpx;
					left: 11rpx;
					width: 135rpx;
					height: 36rpx;
					z-index: 0;
				}

				.head_text {
					position: absolute;
					top: 0;
					left: 11rpx;
					width: 135rpx;
					height: 36rpx;
					text-align: center;
					font-weight: 400;
					font-size: 18rpx;
					color: #8E6B44;
					z-index: 1;
				}

				.nav_title {
					font-weight: normal;
					font-size: 32rpx;
					margin-top: 26rpx;
				}

				.title_1 {
					color: #3D3D3D;

					text {
						color: #FF5B5B;
					}
				}

				.title_2 {
					color: #3B76FF;
				}

				.title_3 {
					color: #5000D6;
				}

				.title_4 {
					color: #BC6E0D;
				}

				.nav_sm_text {
					margin-top: 10rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #3D3D3D;
				}

				image {
					margin-top: 8rpx;
				}

				.image_1 {
					width: 128rpx;
					height: 102rpx;
				}

				.image_2 {
					width: 128rpx;
					height: 87rpx;
				}

				.image_3 {
					width: 101rpx;
					height: 101rpx;
				}

				.image_4 {
					width: 82rpx;
					height: 97rpx;
				}
			}
		}

		.boxs_1 {
			background: #FFFFFF;
		}

		.boxs_2 {
			background: linear-gradient(116deg, #D1F0F1 0%, #F2EBFF 100%);
		}

		.boxs {
			margin-top: 30rpx;
			padding: 16rpx 16rpx 32rpx 16rpx;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.boxs_title {
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				.title_box {
					padding-left: 10rpx;
					font-weight: normal;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.title_box2 {
					padding-left: 15rpx;
					font-weight: normal;
					font-size: 24rpx;
					color: #EC655F;
				}
			}

			.box_hw {
				margin-top: 23rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 195rpx;
					height: 220rpx;
				}
			}

			.logo_list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.list_item {
					margin-top: 20rpx;
					width: 141rpx;
					height: 108rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
				}
			}
		}

		.boxs_3 {
			margin-top: 30rpx;
			background: #FFFFFF;
			padding: 18rpx 30rpx 30rpx 30rpx;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.boxs3_title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.boxs3_left {
					display: flex;
					align-items: center;

					.left_item {
						font-weight: normal;
						font-size: 24rpx;
						color: #666666;
						margin-right: 24rpx;
					}

					.left_act {
						font-size: 32rpx !important;
						color: #3D3D3D !important;
					}
				}

				.boxs3_right {
					width: 89rpx;
					height: 34rpx;
					background: linear-gradient(116deg, #D1F0F1 0%, #F2EBFF 100%);
					border-radius: 136rpx 136rpx 136rpx 136rpx;
					line-height: 34rpx;
					text-align: center;
					font-weight: normal;
					font-size: 24rpx;
					color: #3B76FF;
				}
			}

			.boxs3_box {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				overflow: auto;

				.boxs3_item {
					margin-right: 26rpx;
					padding: 0 15rpx;
					width: calc(220rpx - 30rpx);
					height: 260rpx;
					background: #FAFEFF;
					border-radius: 12rpx !important;
					border: 1rpx solid;
					position: relative;
					border-image: linear-gradient(116deg, rgba(241.00000083446503, 230.33333480358124, 209.00000274181366, 1), rgba(164.73450601100922, 255, 169.2477822303772, 1)) 1 1;

					.img_l_t {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 2;
						width: 160rpx;
						height: 37rpx;
					}

					.box_l_t {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 3;
						width: 160rpx;
						height: 37rpx;
						font-weight: normal;
						font-size: 22rpx;
						color: #FFFFFF;
						text-align: center;
					}

					.boxs3_cons {
						padding-top: 45rpx;

						image {
							width: 187rpx;
							height: 138rpx;
						}

						.title_name {
							font-weight: normal;
							font-size: 22rpx;
							color: #3D3D3D;
							overflow: hidden;
							text-overflow: ellipsis;
							text-wrap: wrap;
							white-space: normal;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
					}
				}
			}


		}

		.boxs_4 {
			margin-top: 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.boxs4_title {
				background: linear-gradient(111deg, #F7DAB2 0%, #FDF8F0 100%);
				font-weight: normal;
				font-size: 32rpx;
				color: #C87A59;
				padding: 25rpx 0 45rpx 0;
				border-top-left-radius: 24rpx;
				border-top-right-radius: 24rpx;
				text-align: center;
				position: relative;

				image {
					position: absolute;
				}
			}
		}

		.boxs5 {
			margin-top: 30rpx;

			.boxs_title {
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				.title_box {
					padding-left: 10rpx;
					font-weight: normal;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}

			.boxs5_nav {
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.nav5_act {
					color: #3B76FF !important;
					background: linear-gradient(116deg, #D1F0F1 0%, #F2EBFF 100%) !important;
				}

				.nav5_item {
					margin-left: 10rpx;
					width: 140rpx;
					height: 40rpx;
					border-radius: 136rpx 136rpx 136rpx 136rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: normal;
					font-size: 24rpx;
					color: #333333;
				}
			}

			.boxs5_list {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.boxs5_item {
					width: 45%;
					padding: 30rpx 15rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-bottom: 20rpx;

					image {
						width: 275rpx;
						height: 234rpx;
					}

					.boxs5_name {
						margin-top: 36rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						text-wrap: wrap;
						font-weight: normal;
						font-size: 24rpx;
						color: #3D3D3D;
						line-height: 34rpx;
					}

					.boxs5_money {
						margin-top: 15rpx;
						font-size: 30rpx;
						color: #D30000;
					}
				}

			}
		}
	}
</style>